<template>
  <ul>
    <el-form ref="ruleForm" :rules="rules" :model="form" :show-message="false">
      <li v-for="item in config" :key="item.key">
        <el-form-item :prop="item.key">
          <el-input
            v-model="form[item.key]"
            :placeholder="item.placeholder"
            :type="item.type || 'text'"
          >
            <i slot="prefix" :class="item.icon"></i>
          </el-input>
        </el-form-item>
        <div v-if="item.type === 'verifyCode'" class="v-code">
          <verify-code
            width="120"
            height="50"
            @checkFn="handleVerifyCode"
          ></verify-code>
        </div>
      </li>
      <li key="verifyCode" v-if="needVerifyCode">
        <el-form-item prop="verifyCode">
          <el-input v-model="form.verifyCode" placeholder="验证码">
            <i slot="prefix" class="iconfont icon-code"></i>
          </el-input>
        </el-form-item>
        <div class="v-code">
          <verify-code
            width="120"
            height="50"
            @checkFn="handleVerifyCode"
          ></verify-code>
        </div>
      </li>
    </el-form>
  </ul>
</template>
<script>
import VerifyCode from '../verify-code/index.vue'
export default {
  name: 'login-form',
  components: {
    VerifyCode
  },
  props: {
    config: {
      isRequired: true
    },
    rules: {
      isRequired: false
    },
    form: {
      isRequired: false
    },
    needVerifyCode: {
      isRequired: false
    }
  },
  methods: {
    validate (cb) {
      cb(this.form)
    },
    handleVerifyCode (clientId) {
      this.$emit('getClientId', clientId)
    },
    realRef () {
      return this.$refs.ruleForm
    }
  }
}
</script>
<style scoped>
ul {
  width: 300px;
  margin: 50px auto 15px;
}
li {
  background: #222;
  border: 1px solid #333;
  border-bottom: none;
  height: 50px;
  vertical-align: middle;
  position: relative;
}
li:last-child {
  border-bottom: 1px solid #333;
}
li > .el-form-item /deep/ input {
  display: inline-block;
  font-size: 14px;
  background: #222;
  outline: none;
  border: none;
  line-height: 50px;
  padding-left: 40px;
}
li > .el-form-item /deep/ .el-input__inner:-webkit-autofill,
li > .el-form-item /deep/ .el-input__inner:-webkit-autofill:hover,
li > .el-form-item /deep/ .el-input__inner:-webkit-autofill:focus,
li > .el-form-item /deep/ .el-input__inner:-webkit-autofill:active {
  transition-delay: 99999s;
  transition: color 99999s ease-out, background-color 99999s ease-out;
}
li > .el-form-item /deep/ .el-form-item__content {
  line-height: 50px;
}
li > .el-form-item /deep/ .el-input__prefix {
  left: 10px;
}
li > .el-form-item /deep/ .el-form-item__error {
  bottom: 3px;
  left: 40px;
}
li > .el-form-item .iconfont {
  font-size: 20px;
  color: #969696;
}
.v-code {
  position: absolute;
  width: 120px;
  height: 50px;
  right: 0;
  top: 0;
}
</style>
